<template>
  <!-- 购物结算 -->
  <el-container>
    <el-card style="width: 100%; margin-top: 3.5rem">
      <div style="border: solid 1px #eee;">
        <h1 style="text-align: center; font-size: 28px;">
          就爱购物车
        </h1>
        <table
          style="padding: 1rem; border: solid 1px #eee; width: 100%; text-align: center"
        >
          <tr>
            <td style="width: 5%;">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
            </td>
            <td>商品名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>操作</td>
          </tr>
          <tr v-for="product in products" :label="product" :key="product.id">
            <!-- 选框 -->
            <td>
              <el-checkbox-group
                v-model="product.checked"
                @change="handleCheckedCitiesChange()"
              >
                <el-checkbox></el-checkbox>
              </el-checkbox-group>
            </td>
            <!-- 商品图片和商品名称 -->
            <td style="padding: 0.5rem">
              <!-- 图片 -->
              <div style="width: 100%; text-align: left; height: 80px">
                <span style="float: left; margin-right: 1rem">
                  <el-image :src="src" style="width: 120px;"></el-image>
                </span>
                <!-- 商品名称 -->
                <div
                  style="width: 100%; 
                padding-top: 7%;"
                >
                  {{ product.productName }}
                </div>
              </div>
            </td>
            <td>￥{{ product.price }}</td>
            <td>
              <el-input-number
                v-model="product.number"
                @change="handleChange"
                :min="1"
                :max="999"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              <el-button type="danger" plain @click="clickRemove(product.id)"
                >移除</el-button
              >
            </td>
          </tr>
        </table>

        <div>
          <span style="float: right; margin-right: 5rem;">
            <el-button
              type="primary"
              plain
              style="width: 8rem; margin: 1rem;"
              @click="goSettle()"
            >
              去结算
            </el-button>
          </span>
        </div>
      </div>
      <div></div>
    </el-card>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 复选框：全选/多选
      checkAll: false,
      checkedCities: [],
      products: [
        {
          id: 1,
          productName: "西瓜",
          price: 3.4,
          number: 1,
          checked: false,
        },
        {
          id: 2,
          productName: "荔枝",
          price: 2.8,
          number: 1,
          checked: false,
        },
        {
          id: 3,
          productName: "火龙果",
          price: 3.3,
          number: 1,
          checked: false,
        },
        {
          id: 4,
          productName: "圣女果",
          price: 4.5,
          number: 1,
          checked: false,
        },
      ],
      isIndeterminate: false,
      // 商品数量计数器
      num: 1,
      // 商品图片数据
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      // 是否可读的模式
      readonly: false,
    };
  },
  methods: {
    // 选框事件

    handleCheckAllChange() {
      alert("全选：" + this.checkAll);
      let _allCheck = this.checkAll;
      // 如果全选打开，勾选所有商品
      if (_allCheck) {
        for (let i = 0; i < this.products.length; i++) {
          this.products[i].checked = true;
        }
        // 如果全选关掉，取消所有商品
      } else {
        for (let i = 0; i < this.products.length; i++) {
          this.products[i].checked = false;
        }
      }
    },

    handleCheckedCitiesChange(value) {
      // alert("复选框时间：" + value);
      return value;
    },

    // 计数器事件
    handleChange(value) {
      console.log(value);
    },
    goSettle(){
      this.$router.push('cashier');
    },
    // 删除事件
    clickRemove: function(Id) {
      // 商品数组索引始于0
      let id = Id - 1;
      alert("删除成功" + Id + "号商品: " + this.products[id].productName + '*' + this.products[id].number);
    },
  },
};
</script>

<style scoped>
tr {
  height: 3rem;
}
</style>
